<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>用于前端学习的试验田</h2>
    <p>动态路由demo</p>
    <el-input 
      v-model="userId" 
      placeholder="请输入用户ID"
      class="userid"
    ></el-input>
    <el-button type="primary" @click="showUserList">显示用户列表</el-button>
    <router-view></router-view>
  </div>
</template>

<script>
// import UserList from '@/components/UserList.vue'
// import AudioTable from '@/components/AudioTable.vue'
export default {
  name: 'AboutView',
  components: {
    // UserList
    // AudioTable
  },
  data () {
    return {
      userId: '',
      users: [
        {
          id: 1,
          name: 'John Doe',
          email: 'JohnDoe@test.com',
          role: 'admin'
        },
        {
          id: 2,
          name: 'Jane Doe',
          email: 'JaneDoe@test.com',
          role: 'user'
        }
      ]
    }
  },
  created () { 
  },
  methods: {
    showUserList () {
      this.$router.push({
        name: 'userList',
        params: {
          id: this.userId
        },
        query: {
          name: 'sunyucui'
        },
        hash: ""
      })
      // this.$router.push('/userList/'+this.userId)
    }
  }
}
</script>

<style scoped>
.userid{
  width: 200px
}
</style>

